<template>
  <view class="group">
    <view class="groups">
      <!-- banner图 -->
      <swiper :style="`height:${phoneinfo.windowHeight -44 }px`" @change="setswiper" autoplay interval="3000" circular>
        <swiper-item v-for="item in list.list">
          <scroll-view scroll-y :style="`height: 100%;width: 100%;margin-bottom:${phoneinfo.windowHeight}px`">
            <view class="banner">
              <!-- <u-swiper :list="list" height="750" interval="5000" @change="setswiper"></u-swiper> -->
              <view class="ban">
                <image :src="item.image"></image>
              </view>
              <view class="price">
                <view class="left">
                  <view class="left1"><span class="span1"> ￥899.00 </span> <span class="span2">10人团</span> </view>
                  <!-- <view class="left2"><s> ￥999.00</s></view> -->
                </view>
                <view class="right">
                  <view class="right1">
                    {{ start ?'距商家下架' : '距离拼购开始' }}
                  </view>
                  <view class="right2">
                    <u-count-down :timestamp="end_time" height='45' font-size="28" color="white" separator="zh"
                      show-days="false" separator-color="#F9A81F" bg-color="#F9A81F" :showDays='true'>
                    </u-count-down>
                  </view>
                </view>
              </view>

            </view>
            <!-- 商品名称 -->
            <view class="title">
              <view class="title1">
                {{item.title}}
              </view>
              <view class="title2" @click="showSku = true">
                <span class="span1">规格</span> <span class="span2">请选择规格</span>
              </view>
              <view class="title2">
                <span class="span1">快递：免运费</span> <!-- <span class="span2">已售{{item.sell}}件</span> -->
              </view>
              <view class="title3">
                服务 <span>7天无理由 · 新品 · 72小时内发货</span>
              </view>
            </view>

            <!-- 商品详情 -->
            <view class="details">
              <view class="title">
                商品详情
              </view>
              <!-- <image src="../../static/images/goods.png" mode=""></image> -->
              <!-- <view v-html="item.content"></view> -->
              <mp-html :content="item.content" :domain="$IMG_URL" :preview-img="false" :show-img-menu="false"></mp-html>
            </view>

            <!-- 规格弹窗 -->
            <!-- <shopro-sku  v-model="showSku" :goodsInfo="item"></shopro-sku> -->
          </scroll-view>

        </swiper-item>
      </swiper>
      <!-- 底部 -->
      <view class="footer">

        <view class="left u-flex">
          <!-- 积分foot -->
          <view class="tools-item u-flex-col u-row-center u-col-center" @tap="goHome">
            <image class="tool-img shopro-selector-circular" src="/static/images/tabbar/tabbar_home1.png" mode="">
            </image>
            <text class="tool-title shopro-selector-rect">首页</text>
          </view>
          <!-- 非积分foot -->

        </view>

        <button v-if="start" type="default" @click="toOrder()">立即拼购</button>
        <button v-else type="default">暂未开始</button>
      </view>
    </view>

    <!-- 登录弹窗 -->
    <shopro-auth-modal></shopro-auth-modal>
  </view>
</template>

<script>
  // import mpHtml from '@/components/mp-html/mp-html'
  import {
    mapMutations,
    mapActions,
    mapState
  } from 'vuex';
  export default {
    components: {
      // mpHtml
    },
    data() {
      return {
        start: false,
        phoneinfo: {},
        favorite: false,
        goodsInfo: {},
        timestamp: 86400,
        list: [{
          out_time: '',
          image: ''
        }],
        showSku:false,
        index: 0 //当前下标
      };
    },

    onShow() {
      this.groupList();
      this.phoneinfo = uni.getSystemInfoSync();
      console.log(this.phoneinfo, '手机')
      // setTimeout(() => {
      // 	this.$refs.uCountDown.start();
      // }, 2000)
    },
    mounted() {

    },
    methods: {
      ...mapActions(['getUserInfo']),
      groupList() {
        this.$http(
          'goods.groupList', {
            status: 1
          },
        ).then(res => {
          // console.log('res', res.data)
          let this_time = parseInt(new Date().getTime() / 1000);
          // console.log(this_time, res.data.open_end.begin)
          if (this_time < res.data.open_end.begin) {
            this.start = false;
            this.end_time = res.data.open_end.begin - this_time;
          } else {
            this.start = true;
            this.end_time = res.data.open_end.end - this_time;
          }
          // console.log(this.start)
          // for (let i = 0; i < res.data.length; i++) {
          // let timeList = res.data[i].end_time.split(':')
          // console.log(timeList)
          // res.data[i].time = timeList[0] * 60 * 60 + timeList[1] * 60 + parseInt(timeList[2])
          this.list = res.data //.push(res.data[i])
          // }
          // console.log(this.list, '时间处理')
        });
      },
      setswiper(index) {
        // console.log(index)
        this.index = index.detail.current;
        // console.log(this.list[index],'切换')
      },
      toOrder() {
        this.$http('user.userDatas').then(res => {
          if (res.data.is_real == 0) {
            setTimeout(function() {
              uni.navigateTo({
                url: '/pages/user/real'
              })
            }, 500)
          } else {
            console.log(this.list.list[this.index].id)
            this.$Router.push({
              path: '/pages/order/grouponConfirm',
              query: {
                goodsId: this.list.list[this.index].id,
              }
            })
          }
        })

      },
      // 回到首页
      goHome() {
        this.$Router.pushTab('/pages/index/index');
      },
    }
  };
</script>

<style lang="scss" scoped>
  .group {
    padding-bottom: 100rpx;
  }

  .banner {
    position: relative;
    width: 100%;

    // height: 100%;
    .ban {
      width: 100%;

      image {
        width: 100%;
      }
    }

    .price {
      width: 100%;
      position: absolute;
      bottom: 0;
      background: url(../../static/images/price.png) repeat-x;
      background-size: 100% 100%;
      overflow: hidden;

      .left {
        width: 50%;
        float: left;
        color: white;
        padding: 20rpx 0;

        .left1 {
          margin-top: 20rpx;

          .span1 {
            padding: 0 44rpx;
            font-size: 40rpx;
            font-family: PingFang SC;
            font-weight: bold;
          }
        }

        .left2 {
          margin-top: 20rpx;
          margin-left: 50rpx;
        }
      }

      .right {
        width: 50%;
        float: right;

        .right1 {
          padding: 23rpx 0;
          text-align: center;
          font-weight: bold;
          font-size: 16px;
        }

        .right2 {
          margin-top: 10rpx;
          margin-left: 30rpx;
        }
      }
    }
  }

  .title {
    background: white;
    padding: 0 30rpx;

    .title1 {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: bold;
      padding: 37rpx 0;
      line-height: 50rpx;
    }

    .title2 {
      color: #666666;
      border-bottom: 1rpx solid #F2F2F2;
      overflow: hidden;
      padding: 22rpx 14rpx;

      .span1 {
        float: left;
      }

      .span2 {
        float: right;
      }
    }

    .title3 {
      padding: 22rpx 14rpx;

      span {
        color: #999999;
        margin-left: 33rpx;
      }
    }

  }

  .details {
    background: white;
    margin-bottom: 100rpx;
    margin-top: 20rpx;
    padding: 20rpx;

    .title {
      text-align: center;
      font-weight: bold;
      padding: 12rpx 0;
      font-size: 30rpx;
    }

    image {
      width: 100%;
    }
  }

  .footer {
    border-top: 1rpx solid #F2F2F2;
    padding: 0 40rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    /* #ifdef H5 */
    bottom: 40px;
    /* #endif */
    height: 120rpx;
    // height:var(--window-bottom);
    background: white;
    overflow: hidden;
    font-size: 24rpx;

    // position: relative;
    image {
      width: 43rpx;
      height: 43rpx;

    }


  }

  button {
    position: relative;
    bottom: 101rpx;
    // border:1px solid red;
    float: right;
    width: 557rpx;
    height: 79rpx;
    border-radius: 40rpx;
    margin-top: 21rpx;
    line-height: 79rpx;
    color: white;
    background-image: linear-gradient(to right, #F9A922, #FDC76B);
  }

  .left,
  .detail-right {
    // flex: 1;
    margin-top: 21rpx;
  }

  .tools-item {
    margin-left: 20rpx;
    float: left;
    // border:1px solid red;
    // flex: 1;
    height: 100%;

    .tool-img {
      width: 46rpx;
      height: 46rpx;
    }

    .tool-title {
      font-size: 22rpx;
      line-height: 22rpx;
      padding-top: 8rpx;
    }
  }

  .detail-btn-box {
    flex: 1;

    .tool-btn {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(#fff, 0.9);
      width: 210rpx;
      min-height: 70rpx;
      border-radius: 35rpx;
      padding: 0;
      margin-right: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .price {
        font-size: 24rpx;
        line-height: 24rpx;
        font-weight: bold;
        color: rgba(#fff, 0.9);
      }

      .price-title {
        font-size: 20rpx;
        line-height: 20rpx;
        font-weight: 500;
        color: rgba(#fff, 0.9);
        padding-top: 8rpx;
      }
    }

    .add-btn {
      box-shadow: 0px 2rpx 5rpx 0px rgba(102, 103, 104, 0.46);
      background: linear-gradient(90deg, rgba(103, 104, 105, 1), rgba(82, 82, 82, 1));
    }

    .pay-btn {
      box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
      background: linear-gradient(90deg, #FA6E3F, #FEAB55);
    }

    .score-btn {
      width: 600rpx;
      line-height: 80rpx;
      background: linear-gradient(90deg, rgba(49, 133, 243, 1), rgba(80, 205, 242, 1));
      box-shadow: 0px 7px 6px 0px rgba(80, 205, 242, 0.2);
      border-radius: 40rpx;
      font-size: 30rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-right: 20rpx;
    }

    .seckill-btn {
      width: 432rpx;
      line-height: 70rpx;
      background: linear-gradient(93deg, rgba(208, 19, 37, 1), rgba(237, 60, 48, 1));
      box-shadow: 0px 7rpx 6rpx 0px rgba(#ed3c30, 0.22);
      font-size: 28rpx;

      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      border-radius: 35rpx;
      padding: 0;
      margin-right: 20rpx;
    }

    .seckilled-btn {
      width: 432rpx;
      line-height: 70rpx;
      background: rgba(221, 221, 221, 1);
      font-size: 28rpx;

      font-weight: 500;
      color: #999999;
      border-radius: 35rpx;
      padding: 0;
      margin-right: 20rpx;
    }

    .groupon-btn {
      width: 210rpx;
      height: 70rpx;
      background: linear-gradient(90deg, rgba(254, 131, 42, 1), rgba(255, 102, 0, 1));
      box-shadow: 0px 7rpx 6rpx 0px rgba(255, 104, 4, 0.22);
      border-radius: 35rpx;
    }
  }
</style>
